<template>
  <div class="wbdetails-page">
    <common-header :headTitle='headTitle'>
    </common-header>
    <div class="content">
      <div id="container" class="threed-box">
        <model-obj
        src="static/models/build/2.obj"
        mtl="static/models/build/2.mtl"
        :backgroundAlpha="1"
        :controllable='ctrAble'
        >
        </model-obj>
        <div class="cam-box">
          <model-obj
          :backgroundAlpha="0"
          :width=50
          :height=50
          :position='position'
          src="static/models/cam2/file.obj"
          mtl="static/models/cam2/file.mtl">
          </model-obj>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { ModelObj } from 'vue-3d-model'
import CommonHeader from '@/components/header/CommonHeader'
import {cachingData} from '../service/cachingData.js'
//引入three.js库
import * as three from 'three'
//引入.obj和.mtl文件加载器
import {MTLLoader,OBJLoader} from 'three-obj-mtl-loader';
//引入轨道控制器
var OrbitControls = require('three-orbit-controls')(three)
//引入transform控制器
var TransformControls = require('three-transform-controls')(three);
//引入CSS2DRenderer加载器
//如果要将基于HTML的标签与3D对象组合，则CSS2DRenderer渲染器非常有用
import {CSS2DRenderer,CSS2DObject} from 'three-css2drender';

export default {
  data() {
    return {
      // position2:{ x: 100, y: -350, z: -100 },
      ctrAble:true,
      position:{ x: 0, y: 0, z: 0 },
      headTitle:'',
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      control:null,
      orbit:null
    }
  },
  components: {
    CommonHeader,
    ModelObj
  },
  created () {
    this.getRouteData();
    console.log(three);
    // var mtlLoader = new MTLLoader();
    // var objLoader = new OBJLoader();
    // console.log(mtlLoader)
    // console.log(objLoader)
  },
  mounted () {
    // this.init();
    // this.render();
    // this.animate()
  },
  methods: {
    getRouteData(){
      cachingData([
        {
          item:'projectName',
          value:this.$route.params.headTitle,
        }
      ])
      this.headTitle=localStorage.getItem('projectName');
      console.log(this.headTitle)
    },
    // init() {
    //   var _this=this;
    //     let container = document.getElementById('container');
    //     //创建cameara
    //     this.camera = new three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10000);
    //     //创建camera位置
    //     // this.camera.position.x = 0;
    //     // this.camera.position.y = 0;
    //     // this.camera.position.z = 10;
    //     this.camera.position.set(1000, 500, 1000)
    //     this.camera.lookAt( 0, 200, 0 )
    //     //创建轨道控制器 传入camera
    //     // var controls = new OrbitControls(this.camera);
    //     // console.log(controls)
    //     var light = new three.DirectionalLight( 0xffffff, 2 );
		// 		light.position.set( 1, 1, 1 );
    //     // var light = new three.AmbientLight(0xFFFFFF);
    //     // light.position.set(100, 100, 200);
    //     //创建场景
    //     this.scene = new three.Scene();
    //     this.scene.add( new three.GridHelper( 1000, 10 ) );
		// 		this.scene.add(light);

    //     // this.scene.background = 'rgba(255,255,255,0)';
    //     //创建立方体 长宽高都是0.2
    //     // let geometry = new three.BoxGeometry(0.2, 0.2, 0.2);
    //     //创建材质
    //     // let material = new three.MeshNormalMaterial();
    //     //创建一个立方体网格（mesh）,将材质包裹在立方体上
    //     // this.mesh = new three.Mesh(geometry, material);
    //     //将立方体添加到场景中
    //     // this.scene.add(light);
    //     //
    //     this.loadOBJ()
    //     //创建渲染器
    //     this.renderer = new three.WebGLRenderer({
    //       antialias: true,
    //       alpha: true,// 默认情况下为黑色场景，此处设置为透明（即白色场景）
    //     });
    //     //设置渲染器的宽高
    //     this.renderer.setSize(container.clientWidth, container.clientHeight);
    //     //
    //     this.orbit = new OrbitControls( this.camera, this.renderer.domElement );
		// 		this.orbit.update();
    //     this.orbit.addEventListener( 'change', this.render );

    //     this.control = new TransformControls( this.camera, this.renderer.domElement );
    //     this.control.addEventListener( 'change', this.render );
    //     this.control.addEventListener( 'dragging-changed', function ( event ) {
		// 			_this.orbit.enabled = ! event.value;
    //     } );
    //     window.addEventListener( 'resize', this.onWindowResize, false );
		// 		window.addEventListener( 'keydown', function ( event ) {
		// 			switch ( event.keyCode ) {
		// 				case 81: // Q
		// 					_this.control.setSpace( _this.control.space === "local" ? "world" : "local" );
		// 					break;
		// 				case 17: // Ctrl
		// 					_this.control.setTranslationSnap( 100 );
		// 					_this.control.setRotationSnap( THREE.Math.degToRad( 15 ) );
		// 					break;
		// 				case 87: // W
		// 					_this.control.setMode( "translate" );
		// 					break;
		// 				case 69: // E
		// 					_this.control.setMode( "rotate" );
		// 					break;
		// 				case 82: // R
		// 					_this.control.setMode( "scale" );
		// 					break;
		// 				case 187:
		// 				case 107: // +, =, num+
		// 					_this.control.setSize( _this.control.size + 0.1 );
		// 					break;
		// 				case 189:
		// 				case 109: // -, _, num-
		// 					control.setSize( Math.max( _this.control.size - 0.1, 0.1 ) );
		// 					break;
		// 				case 88: // X
		// 					_this.control.showX = ! _this.control.showX;
		// 					break;
		// 				case 89: // Y
		// 					_this.control.showY = ! _this.control.showY;
		// 					break;
		// 				case 90: // Z
		// 					_this.control.showZ = ! _this.control.showZ;
		// 					break;
		// 				case 32: // Spacebar
		// 					_this.control.enabled = ! _this.control.enabled;
		// 					break;
		// 			}
		// 		} );
		// 		window.addEventListener( 'keyup', function ( event ) {
		// 			switch ( event.keyCode ) {
		// 				case 17: // Ctrl
		// 					_this.control.setTranslationSnap( null );
		// 					_this.control.setRotationSnap( null );
		// 					break;
		// 			}
		// 		} );
    //     //添加到容器中
    //     container.appendChild(this.renderer.domElement);

    // },
    // onWindowResize() {
		// 		this.camera.aspect = window.innerWidth / window.innerHeight;
		// 		this.camera.updateProjectionMatrix();
		// 		this.renderer.setSize( window.innerWidth, window.innerHeight );
		// 		this.render();
    //   },

    // loadOBJ() {
    //   var _this=this;
    //   //Manager from ThreeJs to track a loader and its status
    //   // var manager = new three.LoadingManager();
    //   //Loader for Obj from Three.js
    //   var objLoader = new OBJLoader();
    //   // var loader = new OBJLoader();
    //   //Launch loading of the obj file, addBananaInScene is the callback when it's ready
    //   /*   loader.setPath("/resource/template/spoc/normal/scripts/three/"); */
    //   objLoader.load('static/models/cam/file.obj',
    //   function (obj) {
    //     obj.scale.set(1, 1, 1);
    //     obj.position.set(0, 0, 0);
    //     // obj.rotation.x = -5;

    //     obj.children.forEach(function (e) {
    //       e.castShadow = false;
    //     });
    //     _this.control.attach( obj );
    //     _this.scene.add(_this.control);
    //   }
    //   )
    //   // objLoader.load('static/models/cam/file.obj',
    //   // function (obj) {
    //   //   obj.scale.set(1, 1, 1);
    //   //   obj.position.set(-10, 15, 0);
    //   //   obj.rotation.z = -5;
    //   //   obj.children.forEach(function (e) {
    //   //     e.castShadow = false;
    //   //   });
    //   //   _this.scene.add(obj);
    //   // }
    //   // )
    //   // objLoader.load('static/models/cam/file.obj',
    //   // function (obj) {
    //   //   obj.scale.set(1, 1, 1);
    //   //   obj.position.set(10, -20, 0);
    //   //   obj.rotation.y = -5
    //   //   // obj.rotation.x = -5

    //   //   obj.children.forEach(function (e) {
    //   //     e.castShadow = false;
    //   //   });
    //   //   _this.scene.add(obj);
    //   // }
    //   // )
    //   // objLoader.load('static/models/file.obj',
    //   // function (obj) {
    //   //   obj.scale.set(0.0001, 0.0001, 0.0001);
    //   //   obj.position.set(0, -1, 0);
    //   //   obj.children.forEach(function (e) {
    //   //     e.castShadow = false;
    //   //   });
    //   //   _this.scene.add(obj);
    //   // }
    //   // )
    // },
    // addBananaInScene(){
    //     //设置模型的中心在模型的中点
    //     banana = object;
    //     banana.children[0].geometry.computeBoundingBox();
    //     banana.rotation.x = three.Math.degToRad( 90 );
    //     banana.children[0].geometry.center()
    //     helper = new three.BoundingBoxHelper(banana, 0x0000000);
    //     helper.update();
    //     //设置结束
    //     //Move the banana in the scene
    //     //Go through all children of the loaded object and search for a Mesh
    //     object.traverse(function(child) {
    //         //This allow us to check if the children is an instance of the Mesh constructor
    //         if (child instanceof three.Mesh) {
    //             //Sometimes there are some vertex normals missing in the .obj files, ThreeJs will compute them
    //             child.geometry.computeVertexNormals();
    //         }
    //     });
    //     banana.scale.set(100, 100, 100);

    //     banana.rotation.x = -0.3;
    //     this.scene.add(helper);
    //     //Add the 3D object in the scene
    //     this.scene.add(banana);
    //     this.render();
    // },
    //  onProgress( xhr ) {
    //     if ( xhr.lengthComputable ) {
    //         var percentComplete = xhr.loaded / xhr.total * 100;
    //         console.log( Math.round(percentComplete, 2) + '% downloaded' );
    //     }
    // },
    // //渲染
    // render() {
    //   this.renderer.render(this.scene, this.camera); // 结合场景和相机进行渲染，即用摄像机拍下此刻的场景
    //   requestAnimationFrame(this.render); // 让浏览器执行参数中的函数，不断循环（浏览器一个新的API）

    // },
    // //设置3d动态效果
    // animate() {
    //     requestAnimationFrame(this.animate);
    //     this.mesh.rotation.x += 0.01;
    //     this.mesh.rotation.y += 0.02;
    //     this.camera.position.x=this.camera.position.x+0.001;
    //     this.renderer.render(this.scene, this.camera);
    // }
  }
}
</script>

<style scoped lang='scss'>
.wbdetails-page{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .content{
    display: flex;
    width: 100%;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 140px;
    padding-left: 240px;
    background: #000;
    // overflow: hidden;
    overflow-y: scroll;

    .threed-box{
      position: relative;
      height: 100%;
      width: 100%;
      background: #fff;

      .cam-box{
        position: absolute;
        width: 50px;
        height: 50px;
        top: 0;
        left: 0;
      }
    }
  }
}
</style>
